<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .layout-container{
            width: min(1000px,100%);
            margin:0 auto;
            columns:3 300px;
            column-gap:1em;
        }
        img{
            display:block;
            margin-bottom:1em;
            width:100%;
        }
    </style>

</head>
<body>
    <div class="layout-container">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\1.jpg" alt=""> 
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\2.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\3.jpg" alt="">     
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\4.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\5.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\6.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\7.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\8.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\9.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\10.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\11.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\12.jpg" alt="">
        <img width="300px" src="D:\code\fe\front-end\html+css+js\css\exercise\dd\13.jpg" alt="">
    </div>
    
</body>
</html>